<template>
    <div>
        <a-card :bodyStyle="{padding:'12px'}">
            <a-tag color="green">后端生成的文件分别在controller，service，entity，mapper目录下</a-tag>
        </a-card>
        <a-card style="text-align: center">
            <a-form :form="form">
                <a-form-item
                        label="数据库表名（大小写均可）"
                        :label-col="{span:10}"
                        :wrapper-col="{span:6}"
                >

                    <a-input
                            allowClear
                            v-decorator="['tableName', {
                                initialValue: this.generate.tableName,
                                rules: [{ required: true, message: '请输入表名！' }]
                            }]"
                    ></a-input>

                </a-form-item>
            </a-form>

        </a-card>
        <div style="margin-top: 24px;text-align: center;">
            <a-button type="primary" @click="next">
                下一步
            </a-button>
        </div>
    </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'

  export default {
    name: "FirstCard",
    data() {
      return {
        form: this.$form.createForm(this),
      }
    },
    computed: {
      ...mapState('workplace', ['generate', 'current'])
    },
    methods: {
      ...mapMutations('workplace', ['setState']),
      next() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.setState({name: 'generate', value: {...this.generate, ...values}})
            this.setState({name: 'current', value: this.current + 1})
          }
        })
      }
    }
  }
</script>

<style scoped>
    /deep/ .ant-tag {
        font-size: 14px
    }
    /deep/.ant-form-item{
        margin-bottom: 0px;
    }
</style>